<template>
  <div v-loading="true" v-if="loading" class="detail-wapper"/>
  <div v-else class="detail-wapper">
    <section class="section">
      <h4 class="section__h4">用户基本信息</h4>
      <div class="secton__content">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="section-content">
              <div class="section-content__label">用户ID：</div>
              <div class="section-content__value">{{ info.playerId }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="section-content">
              <div class="section-content__label">用户昵称：</div>
              <div class="section-content__value">{{ info.playerName }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="section-content">
              <div class="section-content__label">用户头像：</div>
              <div class="section-content__value">
                <img class="player-img" src="" >
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
    <section class="section">
      <h4 class="section__h4">用户货币信息 <el-button size="small" type="default" @click.native.prevent="handleRechargeMoney(info)">充值</el-button></h4>
      <div class="secton__content">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="section-content">
              <div class="section-content__label">房卡：</div>
              <div class="section-content__value">{{ info.roomCard }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="section-content">
              <div class="section-content__label">金币：</div>
              <div class="section-content__value">{{ info.gold }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>
    <section class="section">
      <h4 class="section__h4">用户对战信息</h4>
      <div class="secton__content">
        列表信息缺失
      </div>
    </section>

    <RechargeDialog
      v-if="rechargeDialogShow"
      :player-id="activePlayerId"
      @close="rechargeDialogClose"
      @success="loadData"
    />
  </div>
</template>
<script>
import { getCustomerDetail } from '@/api/customer'
import RechargeDialog from './_partials/recharge-dialog'
export default {
  name: 'CustomerDetail',
  components: {
    RechargeDialog
  },
  data() {
    return {
      loading: true,
      info: {},
      rechargeDialogShow: false,
      activePlayerId: ''
    }
  },
  async created() {
    this.loadData()
  },
  methods: {
    handleRechargeMoney({ playerId }) {
      this.activePlayerId = playerId
      this.rechargeDialogShow = true
    },
    rechargeDialogClose() {
      this.activePlayerId = ''
      this.rechargeDialogShow = false
    },
    async loadData() {
      var { playerId = '' } = this.$route.query || {}
      this.loading = true
      var getCustomerDetailPromise = getCustomerDetail({ id: playerId })
      try {
        const detail = await getCustomerDetailPromise
        this.info = detail
      } catch (exp) {
      //
      }
      this.loading = false
    }
  }
}
</script>
<style lang="scss">

</style>
<style lang="scss" scoped>
.detail-wapper{
    padding:0 30px;
    .section{
      // margin:0 0 20px 0;

      padding:15px 0;
      &__content{
        overflow: hidden;
      }
      &__h4{
        color:#333;
        font-size:16px;
        line-height:40px;
        margin:0;
        // border-bottom:1px solid #ccc;
        margin-bottom:20px;
      }
      &-content{
        &__label{
         float: left;
         width:80px;
         text-align:right;
         font-weight:600;
        }
      }
    }
    .player-img{
      width:180px;
      height:180px;
      background-color:#ccc;
    }
}
</style>

